<template>
  <el-dialog :close-on-click-modal="false" :visible.sync="visible" title="成绩考核" width="95%">
    <el-table :data="tableData" class="assessment-update" style="width: 100%">
      <el-table-column prop="student.number" label="学号"/>
      <el-table-column prop="student.username" label="姓名"/>
      <el-table-column label="课堂表现(6分)" align="center" width="140">
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.score.performance }}</span>
          <el-input-number
            v-else
            v-model="scope.row.score.performance"
            :min="0"
            :max="6"
            size="mini"
            label="描述文字"
          />
        </template>
      </el-table-column>
      <el-table-column prop="operation" label="作业情况(6分)" align="center" width="140">
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.score.operation }}</span>
          <el-input-number v-else v-model="scope.row.score.operation" :min="0" :max="6" size="mini" label="描述文字"/>
        </template>
      </el-table-column>
      <el-table-column prop="experiment" label="实验实践(6分)" align="center" width="140">
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.score.experiment }}</span>
          <el-input-number
            v-else
            v-model="scope.row.score.experiment"
            :min="0"
            :max="6"
            size="mini"
            label="描述文字"
          />
        </template>
      </el-table-column>
      <el-table-column prop="attendance" label="出勤情况(6分)" align="center" width="140">
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.score.attendance }}</span>
          <el-input-number
            v-else
            v-model="scope.row.score.attendance"
            :min="0"
            :max="6"
            size="mini"
            label="描述文字"
          />
        </template>
      </el-table-column>
      <el-table-column prop="other" label="其他(6分)" align="center" width="140">
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.score.other }}</span>
          <el-input-number v-else v-model="scope.row.score.other" :min="0" :max="6" size="mini" label="描述文字"/>
        </template>
      </el-table-column>
      <el-table-column prop="paper" label="卷面成绩(70分)" align="center" width="140">
        <template slot-scope="scope">
          <span v-if="!scope.row.edit">{{ scope.row.score.paper }}</span>
          <el-input-number v-else v-model="scope.row.score.paper" :min="0" :max="70" :step="5" size="mini" label="描述文字"/>
        </template>
      </el-table-column>
      <el-table-column prop="total" label="总分" align="center">
        <template slot-scope="scope">
          <span
            style="color:#67C23A"
          >{{ scope.row.score.performance+scope.row.score.operation+scope.row.score.experiment+scope.row.score.attendance+scope.row.score.other+scope.row.score.paper }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="140">
        <template slot-scope="scope">
          <el-button v-if="!scope.row.edit" size="mini" @click="scope.row.edit=true">编辑</el-button>
          <el-button v-if="scope.row.edit" type="primary" size="mini" @click="updateScore(scope.row)">保存</el-button>
          <el-button v-if="scope.row.edit" size="mini" @click="scope.row.edit=false">取消</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import { updateScore, getScore } from '@/api/score'
export default {
  data() {
    return {
      visible: false,
      row: {},
      tableData: [
      ]
    }
  },
  computed: {},
  methods: {
    init(row) {
      this.visible = true
      this.getScore(row._id)
    },
    getScore(course) {
      getScore({
        course
      }).then(res => {
        if (res.code === 1) {
          res.data.scoreLists.map(item => {
            item.edit = false
          })
          this.tableData = res.data.scoreLists
        }
      })
    },
    updateScore(row) {
      const data = {
        scoreId: row._id,
        score: row.score
      }
      updateScore(data).then((res) => {
        if (res.code === 1) {
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 1500
          })
          row.edit = false
        } else {
          this.$message({
            message: '保存失败',
            type: 'error',
            duration: 1500
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
.assessment-update .cell {
  padding: 0;
}
</style>

